const log = console.log.bind(console)

const e = sel => document.querySelector(sel)

const es = sel => document.querySelectorAll(sel)

// 行数
const ROW = 10
// 列数
const COL = 10

// 最大地雷数量
const maxCount = 10

const judgeGameVictory = function(victory_row, victory_col, victory_gridArr) {
    let bo = true
    for (let i = 0; i < victory_row; i++) {
        for (let j = 0; j < victory_col; j++) {
            let block = victory_gridArr[i][j]
            // 判断游戏是否结束(所有的非雷方格已打开)
            if (!block.isMine && !block.isOpen) {
                bo = false
                break
            }
        }
    }
    return bo
}

// 设定打开方格的状态与样式
const setBlockStyle = function(block) {
    // isOpen为自定义属性，设置为true代表已打开
    block.isOpen = true
    // 将背景设置为灰色
    block.style.background = "#ccc"
    // 将鼠标停留样式设置为默认
    block.style.cursor = "default"
}

const renderAllMine = function(render_row, render_col) {
    // 遍历矩阵打开所有的地雷方格
    for (let i = 0; i < render_row; i++) {
        for (let j = 0; j < render_col; j++) {
            let block = grid[i][j]

            // 找到地雷
            if (!block.isOpen && block.isMine) {
                setBlockStyle(block) // 设置打开状态和样式
                block.innerHTML = "雷" // 显示为 '雷'
            }
        }
    }
    // 提示游戏结束
    alert("游戏结束")
}

const cycleBlockOpen = function(cycle_i, cycle_j, cycle_row, cycle_col) {
    // 打开计雷数为 0 的方格
    // 遍历九宫格内的方格
    for (let i = cycle_i - 1; i < cycle_i + 2; i++) {
        for (let j = cycle_j - 1; j < cycle_j + 2; j++) {
            // 判断是否越界 && 跳过已打开的方格 && 非雷
            if (
                i > -1 &&
                j > -1 &&
                i < cycle_row &&
                j < cycle_col &&
                !grid[i][j].isOpen &&
                !grid[i][j].ismine
            ) {
                // 递归打开方格函数
                blockOpen(i, j)
            }
        }
    }
}

// 打开方格函数
const blockOpen = function(b_i, b_j) {
    let row = ROW
    let col = COL
    let block = grid[b_i][b_j]
    // 设定打开方格的状态与样式
    setBlockStyle(block)

    if (block.isMine) {
        // 踩雷
        // 显示为 '雷'
        block.innerHTML = "雷"

        renderAllMine(row, col)
    } else if (block.count === 0) {
        // 打开计雷数为 0 的方格
        // 遍历九宫格内的方格
        cycleBlockOpen(b_i, b_j, row, col)

    } else {
        // 打开计雷数不为 0 的方格
        block.innerHTML = block.count // 显示计雷数
    }
}

const renderMine = function(index_i, index_j, mineRow, mineCol, MineGrid) {
    // 生成地雷
    let count = 0 // 当前地雷数
    while (count < maxCount) {
        // 生成随机坐标
        let ri = Math.floor(Math.random() * mineRow)
        let rj = Math.floor(Math.random() * mineCol)

        // 坐标不等于第一次点击方格的坐标 && 非雷方格
        if (!(ri === index_i && rj === index_j) && !MineGrid[ri][rj].isMine) {
            // 自定义属性isMine代表方格为地雷
            MineGrid[ri][rj].isMine = true
            // 当前地雷数 +1
            count++

            // 更新九宫格内非雷方格的计雷数
            for (let i = ri - 1; i < ri + 2; i++) {
                for (let j = rj - 1; j < rj + 2; j++) {
                    // 判断坐标防越界
                    if (i > -1 && j > -1 && i < mineRow && j < mineCol) {
                        // 计雷数+1
                        MineGrid[i][j].count++
                    }
                }
            }
        }
    }
}

// 第一次打开方格
let isFirstOpen = true

// 方格点击事件 _i：坐标i _j:坐标j e:鼠标事件
const block_click = function(_i, _j, e) {
    let row = ROW
    let col = COL
    // 跳过已打开的方格
    if (grid[_i][_j].isOpen) {
        return
    }

    // 鼠标左键打开方格
    if (e.button === 0) {
        // 第一次打开
        if (isFirstOpen) {
            isFirstOpen = false

            // 生成地雷
            renderMine(_i, _j, row, col, grid)
        }

        // 执行打开方格函数
        // 打开方格函数
        blockOpen(_i, _j)
    } else if (e.button === 2) {
        // 鼠标右键标记方格
        let block = grid[_i][_j]
        if (block.innerHTML !== '▲') {
            block.innerHTML = '▲'
        } else {
            block.innerHTML = ''
        }
    }

    // 判断游戏是否🎉胜利🎉结束(所有的非雷方格已打开)
    if (judgeGameVictory(row, col, grid)) {
        alert("游戏胜利")
    }
}

const renderHTML = function(html_row, html_col) {
    // 生成矩阵html <tr>--行标签 <td>--列标签
    let gridHtml = ''
    for (let i = 0; i < html_row; i++) {
        gridHtml += '<tr>'
        for (let j = 0; j < html_col; j++) {
            gridHtml += `
            <td><span class="blocks" onmousedown="block_click(${i}, ${j}, event)"></span></td>
            `
        }
        gridHtml += '<tr>'
    }
    // 写入html
    e('#grid').innerHTML = gridHtml
}

const renderTwoDArray = function(init_col) {
    // 返回矩阵二维数组
    let blocks = es('.blocks')
    // let blocks = document.getElementsByClassName('blocks')
    let gridArr = []
    for (let i = 0; i < blocks.length; i++) {
        if (i % init_col === 0) {
            gridArr.push([])
        }
        // 初始化计雷数
        blocks[i].count = 0
        let index = parseInt(i / init_col)
        gridArr[index].push(blocks[i])
    }
    return gridArr
}

// 矩阵二维数组
let grid
const initGrid = function(init_row, init_col) {
    // 生成矩阵 html
    renderHTML(init_row, init_col)

    // 初始化矩阵二维数组
    grid = renderTwoDArray(init_col)
}

// 初始化矩阵 (row-行数 col-列数)
initGrid(ROW, COL)
